<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>画廊图册</title>
<script src="../js/jsconfigrem.js"></script>
<link rel="stylesheet" href="../css/swiper.min.css">
<link rel="stylesheet" href="../css/cssreset.css"/>
<link rel="stylesheet" href="css/gallery.css"/>
<script src="../js/swiper-3.4.1.min.js"></script>
<script src="../js/jquery-1.8.3.min.js"></script>
<style>

</style>
</head>
<body style="padding-top:40px;">
    <div class="app-wrap">
        <!-- 公有头部标题  -->
        <div class="head-title fixed">
            <div class="imgbox back-arrow">
                <a href="../index.html" class="block">
                    <img src="../publice_img/back-arrow.png" alt="">
                </a>
            </div>
            <p class="txt">画廊</p>
        </div>
        <!-- 公有头部标题  -->
        <div class="swiper-container gallery-banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="###" class="block">
                        <img src="images/banner01.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="###" class="block">
                        <img src="images/banner02.jpg" alt="">
                    </a>    
                </div>
                <div class="swiper-slide">
                    <a href="###" class="block">
                       <img src="images/banner03.jpg" alt="">
                    </a>       
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
        <div class="son-section">
            <div>
                <h1 class="main-title text-c text-overflow">期待已久的怪物大学特辑!!</h1>
                <p class="text-c sub-desc text-overflow">来自皮克斯动画工程，精致动画</p>
            </div>
            <div class="tag-icon-box text-c">
                <span class="ndm-normal">有趣</span>
                <span class="ndm-red">动画</span>
                <span class="ndm-blue">可爱</span>
                <span class="ndm-green">儿童</span>
            </div>
        </div>
        <div class="text-l cl">
            <ul class="message-list-box cl">
                <li class="">
                    <a href="###" class="block cl">
                        <div class="left-box">
                            <h2 class="message-title text-ellipsis-2">阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬</h2>
                            <p class="message-txt ndm-gray">阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬</p>
                        </div>
                        <div class="right-box">
                            <img src="images/01.jpg" alt="">
                        </div>
                        <div class="ico-box">
                            <div class="imgbox"><img src="../publice_img/like.png" alt=""></div><span>125653</span>
                            <div class="imgbox"><img src="../publice_img/msg.png" alt=""></div><span>12369</span>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href="###" class="block cl">
                        <div class="left-box">
                            <h2 class="message-title text-ellipsis-2">阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬</h2>
                            <p class="message-txt ndm-gray">阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬</p>
                        </div>
                        <div class="right-box">
                            <img src="images/02.jpg" alt="">
                        </div>
                        <div class="ico-box">
                            <div class="imgbox"><img src="../publice_img/like.png" alt=""></div><span>125653</span>
                            <div class="imgbox"><img src="../publice_img/msg.png" alt=""></div><span>12369</span>
                        </div>
                    </a>
                </li>
                <li class="">
                    <a href="###" class="block cl">
                        <div class="left-box">
                            <h2 class="message-title text-ellipsis-2">阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬</h2>
                            <p class="message-txt ndm-gray">阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬阿斯顿发煎熬</p>
                        </div>
                        <div class="right-box">
                            <img src="images/03.jpg" alt="">
                        </div>
                        <div class="ico-box">
                            <div class="imgbox"><img src="../publice_img/like.png" alt=""></div><span>125653</span>
                            <div class="imgbox"><img src="../publice_img/msg.png" alt=""></div><span>12369</span>
                        </div>
                    </a>
                </li>

            </ul>
        </div>


        <div class="nomore-endsection">
            <div class="imgbox">
                <img src="../publice_img/nomore.png" alt="">
            </div>
            <p>没有更多啦!~~</p>
        </div>
    </div>


    
</body>
<script>



    var swiper = new Swiper('.gallery-banner', {
        // pagination: '.swiper-pagination'
        // paginationClickable: true,
        spaceBetween:8,
        // autoplay:3000,
        autoHeight: true, //enable auto height
  
    });

</script>
<script>
</script>

</html>